<template>
  <view class="main">
    <view class="item" v-for="(item, index) in getTrendsPageData" :key="index"
      @click.stop="$goUrl(`/pages/index/pages/forDetail?id=${item.id}`)">
      <view class="top dispaly-just-between">
        <view class="top-left">
          <view class="left-top">
            <view class="name over1">供应 | {{ item.content }}</view>
            <view class="time">{{ item.expireTime.split(" ")[0] }}</view>
          </view>
          <view class="left-bottom">
            <!-- <view class="tip">电子元件</view> -->
            <view class="label">#{{ matchedName(item.subtype) }}</view>
          </view>
        </view>
        <view class="top-right">
          <image :src="item?.images.split(',')[0]" mode="aspectFill" />
        </view>
      </view>
      <view class="bottom dispaly-just-between">
        <view class="person">{{ item.callNum }}人已联系</view>
        <view class="btns dispaly-center">
          <view class="one btn dispaly-align-center" v-if="item?.isOverhead == 0" @click.stop="
            $goUrl(
              `/pages/forSale/pages/wantTop?id=${item.id}&cid=${item.circleId}`
            )
            ">置顶
          </view>
          <view class="two btn dispaly-align-center" @click.stop="deletelShowFun(item.id)">删除</view>
        </view>
      </view>
    </view>
    <LoadMore :status="status" />
  </view>
  <!-- 确定删除供需吗？ -->
  <van-dialog @confirm="confirmDelete" v-model:show="deleteForSaleShow" title="提示" show-cancel-button
    message="确定删除供需吗？">
  </van-dialog>
</template>

<script setup>
import { reactive, ref } from "vue";
import { onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { getTrendsPage, deleteForSale, getWriteFillList } from "@/api/apiList";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { deleteObjectEmptyKey } from "@/utils/util";

const tabList = ref([]);
const getWriteFillListData = async () => {
  const res = await getWriteFillList("/trends_sub_type");
  if (res.code == 200) {
    tabList.value = res.data;
  }
};

const matchedName = (subtype) => {
  // 查找匹配的对象并返回名称
  const matchedItem = tabList.value.find((item) => item.dictCode === subtype);
  return matchedItem ? matchedItem.dictLabel : "";
};

const deleteForSaleShow = ref(false);
const query = reactive({
  pageSize: 10,
  pageNum: 1,
  source: 1,
  isUserId: 1,
});
const getTrendsPageData = ref([]);
const status = ref("noMore");
const getTrendsPageChange = async () => {
  const response = await getTrendsPage(query);
  status.value = "loading";
  if (response && response?.code == 200) {
    if (response.rows.length) {
      getTrendsPageData.value = [...getTrendsPageData.value, ...response.rows];
      status.value = "noMore";
    } else {
      status.value = "noMore";
    }
  } else {
    status.value = "noMore";
  }
};

const forId = ref(null);
const deletelShowFun = (id) => {
  deleteForSaleShow.value = true;
  forId.value = id;
  console.log(forId.value, "forId.value");
};

const confirmDelete = async () => {
  const res = await deleteForSale(forId.value);
  if (res.code == 200) {
    query.pageNum = 1;
    getTrendsPageData.value = [];
    getTrendsPageChange();
  }
};

onShow(async () => {
  console.log(uni.getStorageSync("userInfo").userId, 'uni.getStorageSync("userInfo")')
  query.isUserId = uni.getStorageSync("userInfo")?.userId ? 1 : 0;
  query.pageNum = 1;
  getTrendsPageData.value = [];
  await getTrendsPageChange();
  getWriteFillListData();
});

onReachBottom(() => {
  query.pageNum++;
  getTrendsPageChange();
});

onPullDownRefresh(() => {
  uni.showLoading({
    title: "加载中",
  });
  query.pageNum = 1;
  getTrendsPageData.value = [];
  getTrendsPageChange();
  uni.hideLoading();
  uni.stopPullDownRefresh();
});
</script>

<style lang="scss" scoped>
.main {
  padding: 20rpx 0;

  .item:last-child {
    margin-bottom: 0;
  }

  .item {
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    background: #ffffff;
    padding: 30rpx;

    .top {
      height: 160rpx;
      border-bottom: 1rpx solid #eee;
      padding-bottom: 34rpx;

      .top-right {
        image {
          width: 160rpx;
          height: 160rpx;
          border-radius: 16rpx;
        }
      }

      .top-left {
        height: 160rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .left-top {
          .name {
            font-family: PingFang SC Regular;
            font-size: 24rpx;
            color: #111111;
            margin-bottom: 10rpx;
          }

          .time {
            font-family: PingFang SC Regular;
            font-size: 22rpx;
            color: #777777;
          }
        }

        .left-bottom {
          .tip {
            font-family: PingFang SC Regular;
            font-size: 22rpx;
            color: #777777;
          }

          .label {
            font-family: PingFang SC Regular;
            font-size: 24rpx;
            color: #111111;
            margin-top: 10rpx;
          }
        }
      }
    }

    .bottom {
      margin-top: 30rpx;

      .person {
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        color: #999999;
      }

      .btns {
        .btn {
          border-radius: 8rpx;
          font-family: PingFang SC Medium;
          font-size: 26rpx;
          padding: 10rpx 14rpx;
        }

        .one {
          color: #0753fd;
          border: 1px solid #0753fd;
          margin-right: 36rpx;
        }

        .two {
          color: #fd0f07;
          border: 1px solid #fd0f07;
        }
      }
    }
  }
}
</style>
